    // target frames per second
    const FPS = 1;
    //number of radians in segment.
    const NU_SEGMENTS = 7;
    const SEGMENT_RADIANS = (Math.PI*2)/NU_SEGMENTS;    
    var j=0;
    var canvas = null;
    var buffer = null;
    var C = null;
    var B = null;
    
    var colors = new Array("red", "orange", "yellow", "green", "blue", "indigo", "violet");
    var current_tick = 0;
    
    var icons = new Array();
    PreloadImages();

    window.onload = init;
    
    function PreloadImages()
    {
	icons[0]= new Image(20,20);
	icons[0].src = "sword2.gif";
    }
    
    function init()
    {
       canvas = document.getElementById('canvas');
       C = canvas.getContext('2d');
       
       //double buffer.
       buffer = document.createElement('canvas');
       buffer.width = canvas.width;
       buffer.height = canvas.height;
       B = buffer.getContext('2d');

       draw();
       setInterval(draw, 1000 / FPS);    
    }
    
    function draw()
    {
       WhiteOut(B, 800, 800);
       
       B.save();
       B.translate(400,400);
       var current_segment = current_tick % 7;
       
       for (j = 0; j < NU_SEGMENTS; j++)
       {
	    var tickForPie = 0;
	    if (current_segment == j)
	    {
		tickForPie = current_tick;
	    }
	    else if (current_segment > j)
	    {	    
		tickForPie = current_tick + (NU_SEGMENTS - (current_segment - j));
	    }
	    else
	    {
		tickForPie = current_tick + (j - current_segment);
	    }
	    B.save();
	    if (j  == current_segment) //if this is the current segment, we need to pop it out.
	    {
		B.translate(100 * Math.cos(SEGMENT_RADIANS /2), 100 * Math.sin(SEGMENT_RADIANS /2));
	    }
	    drawPie(0,0,200,colors[j],  tickForPie, j == current_segment);
	    B.restore();
	    B.rotate(SEGMENT_RADIANS);
       }
       B.restore();
       
       C.drawImage(buffer, 0, 0);
       current_tick++; //animate.
    }
    
    function drawNumber(x,y,number,px,reverse)
    {
	B.save();
		B.beginPath();
		B.font = px + 'px sans-serif';
		B.textAlign = "center";
		B.textBaseline="middle";
		var width = B.measureText(number);
		
		
		B.fillStyle = "black";
		if (reverse) B.fillStyle = "white";
		B.strokeStyle = "black";
		if (width > px)
		{
			B.arc(x,y,width, 0, Math.PI * 2, true);
		}
		else
		{
			B.arc(x,y,px, 0, Math.PI * 2, true);
		}
		B.fill();
		B.stroke();
		
		B.beginPath();	
		B.fillStyle = "white";
		if (reverse) B.fillStyle = "black";
		B.fillText(number, x, y);
	B.restore();
    }
    
    function drawPie(x, y, radius, color, tick, current)
    {
	var startAngle = 0;
	var endAngle = SEGMENT_RADIANS;
	
	B.save();
		B.strokeStyle="black";
		B.fillStyle=color;
		B.beginPath();		
		B.arc(x, y, radius, startAngle, endAngle, false);			
		B.moveTo(x,y);
		B.lineTo((Math.cos(startAngle) * radius + x), (Math.sin(startAngle) * radius + y));
		B.lineTo((Math.cos(endAngle) * radius + x), (Math.sin(endAngle) * radius + y));
		B.stroke();
		B.fill();
		
		//it's dumb but we have to restroke otherwise we lose half of every line with the fill, and 2/3rds
		//of the last line of the last piece.
		B.beginPath();
		B.moveTo(x,y);
		B.lineTo((Math.cos(endAngle) * radius + x), (Math.sin(endAngle) * radius + y));
		B.stroke();
		
		
		B.save();
		//move us along the center angle that the pie seems to be aligned on.
		B.rotate(startAngle + endAngle / 2);
		//set up icons in pie.
		drawRect(Math.cos(endAngle / 2) * radius / 2, Math.sin(endAngle / 2) * radius / 2,
			        Math.cos(endAngle /2 ) * radius, -1 * (Math.sin(endAngle / 2) * radius / 2));
		//number the pie
		drawNumber(radius, 0, tick, 20, current);
		B.restore();
	B.restore();
    }
    
    function drawRect(x1, y1, x2, y2)
    {
	drawPics(x1,y2,4,4);	
    }
    
    function drawPics(x,y,across,down)
    {
	B.save();
	B.translate(x,y);
		for (row = 0; row < down; row++)
		{
			for (col = 0; col < across; col++)
			{			        
				B.drawImage(icons[0], col * 22, row * 22);
			}			
		}
	B.restore();
    }
    
    function WhiteOut(C, height, width)
    {
	C.save();
	C.fillStyle = "rgb(256,256,256)";
	C.fillRect(0,0,height,width);
	C.restore();
    }